<template>
	<view>
		<view class="status-bar">
    <image :src="data.order_refund.order_refund_status_bg"></image>
    <view>
        <block v-if="data.order_refund.refund_type==1">
            <block v-if="data.order_refund.refund_status==0">
                <block v-if="data.order_refund.is_agree==0">等待审核中</block>
                <block v-else>
                    <block v-if="data.order_refund.is_user_send==0">已同意退货，请及时发货</block>
                    <block v-else>已发货，待平台确认</block>
                </block>
            </block>
            <block v-if="data.order_refund.refund_status==1">已同意退货并已退款</block>
            <block v-if="data.order_refund.refund_status==3">已拒绝退货</block>
        </block>
        <block v-else>
            <block v-if="data.order_refund.refund_status==0">等待审核中</block>
            <block v-if="data.order_refund.refund_status==2">已同意换货</block>
            <block v-if="data.order_refund.refund_status==3">已拒绝换货</block>
        </block>
    </view>
</view>
<view style="padding-left:24upx;margin-bottom:20upx;background:#fff" v-if="data.order_refund.refund_type==1&&data.order_refund.refund_status==0&&data.order_refund.is_agree!=0||data.order_refund.refund_status==2">
    <text style="font-size:10pt;color:#999999">收件人信息</text>
    <view class="flex-row flex-y-center">
        <view class="flex-col flex-grow-1">
            <view class="flex-row address-info">
                <view>{{data.order_refund.re_name}}</view>
                <view>{{data.order_refund.re_mobile}}</view>
            </view>
            <view style="margin-right:40upx">{{data.order_refund.re_address}}</view>
        </view>
        <view class="flex-grow-0 flex-x-center flex-y-center copy-fz">
            <text @tap="$emit('copyinfo',$event)" :data-info="data.order_refund.re_name/data.order_refund.re_mobile/data.order_refund.re_address">一键
复制</text>
        </view>
    </view>
    <view style="height:1upx;background:#e2e2e2;margin:20upx 0"></view>
    <view style="font-size:10pt;color:#bbbbbb">· 未与卖家协商一致情况下，请勿寄到付或平邮</view>
    <view style="height:5upx"></view>
    <view style="font-size:10pt;color:#bbbbbb;padding-bottom:24upx">· 请填写真实有效物流信息</view>
</view>
<form @submit="$emit('sendFormSubmit',$event)" reportSubmit="true">
    <block v-if="data.order_refund.is_agree==1">
        <view class="express-block" v-if="data.order_refund.is_user_send==0">
            <view class="flex flex-row" style="border-bottom: 3upx solid #eee;">
                <view class="flex-grow-0 flex-y-center" style="margin-right: 32upx">快递公司：</view>
                <view class="flex-grow-1">
                    <picker @change="$emit('bindExpressPickerChange',$event)" name="express" :range="data.order_refund.express_list" rangeKey="name" style="padding: 24upx 0" :value="data.express_index">
                        <view class="flex flex-row">
                            <view class="flex-grow-1">
                                <view v-if="data.express_index!==null">
                                    {{data.order_refund.express_list[data.express_index].name}}
                                </view>
                                <view style="color: #888" v-else>请选择快递公司</view>
                            </view>
                            <view class="flex-grow-0">
                                <image :src="data.__wxapp_img.dapp.jiantou_r.url" style="width: 12upx;height: 22upx;"></image>
                            </view>
                        </view>
                    </picker>
                </view>
            </view>
            <view class="flex flex-row">
                <view class="flex-grow-0 flex-y-center" style="margin-right: 32upx">快递单号：</view>
                <view class="flex-grow-1">
                    <input name="express_no" placeholder="请填写快递单号" style="padding: 24upx 0;height: auto"></input>
                </view>
            </view>
        </view>
        <view class="express-block" style="padding: 32upx 24upx" v-else>
            <view class="flex flex-row" style="margin-bottom: 18upx">
                <view class="flex-grow-0" style="margin-right: 32upx">快递公司：</view>
                <view class="flex-grow-1">{{data.order_refund.user_send_express}}</view>
            </view>
            <view class="flex flex-row">
                <view class="flex-grow-0" style="margin-right: 32upx">快递单号：</view>
                <view class="flex-grow-1">{{data.order_refund.user_send_express_no}}</view>
            </view>
        </view>
    </block>
    <view class="flex-row bg-white mb-20 data-row">
        <view class="flex-grow-0">
            <image mode="aspectFill" :src="data.order_refund.goods_pic" style="width: 156upx;height: 156upx;margin-right:20upx "></image>
        </view>
        <view class="flex-grow-1 flex-col">
            <view class="flex-grow-1 mb-20">{{order_refund.name}}</view>
            <view class="flex-grow-0 flex-row" style="font-size: 9pt">
                <view class="flex-grow-1">
                    <view style="margin-right: 40upx;display: inline-block" v-for="(item,index) in data.order_refund.attr" :key="item.id">
                        {{item.attr_group_name}}:{{item.attr_name}}
                    </view>
                </view>
                <view class="flex-grow-0">×{{data.order_refund.num}}</view>
            </view>
        </view>
    </view>
    <view class="bg-white mb-20 data-row">
        <view class="mb-20">售后类型：{{data.order_refund.refund_type==1?'退货退款':'换货'}}</view>
        <view class="mb-20">退款金额：
            <text style="color:#ff4544">￥{{data.order_refund.refund_price}}</text>
        </view>
        <view class="mb-20">申请原因：{{data.order_refund.refund_desc}}</view>
        <view class="pic-list mb-20">
            <image @tap="$emit('viewImage',$event)" :data-index="index" mode="aspectFill" :src="item" style="width: 160upx;height: 160upx" v-for="(item,index) in data.order_refund.refund_pic_list" :key="item.id"></image>
        </view>
    </view>
    <view style="padding: 24upx 24upx 48upx" v-if="data.order_refund.is_agree==1&&data.order_refund.is_user_send==0">
        <button class="goods_send" formType="submit">确认发货
            </button>
    </view>
</form>

	</view>
</template>

<script>var myVue = {};
	export default {
		props:['data'],
		data() {
			return {
				
			};
		}
	}
</script>

<style scoped>
.data-row {
    padding: 28upx 24upx;
    border-top: 1upx solid #e3e3e3;
}

.pic-list {
    margin-left: -20upx;
    margin-top: -20upx;
}

.pic-list image {
    margin-left: 20upx;
    margin-top: 20upx;
}

.status-bar {
    position: relative;
    height: 140upx;
    line-height: 140upx;
    color: #fff;
    padding: 0 40upx;
    margin-bottom: 20upx;
}

.status-bar image {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: #fb715a;
}

.express-block {
    background: #fff;
    margin-bottom: 20upx;
    border-bottom: 1upx solid #e3e3e3;
    padding: 0 24upx;
}

.copy-fz {
    border-radius: 50%;
    margin-right: 24upx;
    color: #999999;
    width: 100upx;
    height: 100upx;
    border: 1upx solid #e2e2e2;
    font-size: 10pt;
}

.address-info {
    justify-content: space-between;
    margin: 20upx 40upx 20upx 0;
    color: #353535;
}

.goods_send {
    border: none;
    background: #ff4544;
    color: #fff;
    border-radius: 10upx;
    height: 80upx;
    line-height: 80upx;
}
</style>
